<template>
  <ex-dialog
    width="900px"
    class="ex-diolog"
    :title="title"
    :visible="visible"
    @closeDialog="handleClose"
  >	
    <div class="head">
      <el-form :model="ruleForm" ref="ruleForm" :rules="rules" :inline="true" label-width="100px">
        
        <el-form-item label="开始时间" prop="time">
          <el-date-picker v-model="ruleForm.time" type="date" placeholder="开始时间" format="yyyy-MM-dd" value-format="yyyy-MM-dd" >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input v-model="ruleForm.price" placeholder="请输入价格" clearable size="small" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="submitForm('ruleForm')">添加价格</el-button>
        </el-form-item>
      </el-form>
    </div>
		<el-table v-loading="loading" :data="customerList" stripe border>
      <el-table-column label="序号" type="index" width="55" align="center" fixed />
      <el-table-column label="时间" align="center" prop="time" :show-overflow-tooltip="true" />
      <el-table-column label="价格" align="center" prop="price" :show-overflow-tooltip="true"/>
      <el-table-column label="操作" align="center" width="120" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handleDelete(scope.row)">删除</el-button> 
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
          @pagination="getList" />
  </ex-dialog>
</template>
<script>
// components
import Loading from '@/components/Loading/index'
// api
import {
  historyList,
  changeStatus,
  addHistory,
  deletehistory
} from "@/api/kyyOfficialWebsite/offeringCalendar";

export default {
  components: {
    Loading
  },
  props: {
    visible: Boolean,
    id: String,
  },
  data() {
    
    return {
      loading: false,
      title: '历史价格',
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        calendarId: '',
      },
      ruleForm: {
        calendarId: '',//	发行平台
        price: '',//	发行方
        time: '',//	发行logo
        
      },
      customerList: [],
      rules: {
          price: [
            { required: true,message: '请填写价格',trigger: 'blur' }
          ],
          time:[
            { required: true,message: '请选择开始时间',trigger: 'change' }
          ],
        }
    }
  },
  computed: {
   
  },
  created() {
    this.queryParams.calendarId = this.id
    this.ruleForm.calendarId = this.id
    console.log(' this.ruleForm.calendarId', this.ruleForm.calendarId)
    this.getList()
	},
  methods: {
    //列表
    getList() {
      this.loading = true;
      historyList(this.queryParams).then(response => {
        this.total = response.result.total
        
          this.customerList = response.result.records
          this.customerList = this.customerList.map(item => {
            // console.log('item',item)
            Object.keys(item).forEach(key => {
              if (item[key] === '') {
                item[key] = '-'
              }
            })
            return item
          })
          
          this.loading = false;
        
      }).finally(()=>{
        this.loading = false;
      })
    },
    //删除
    handleDelete(row){
      this.$confirm('是否删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deletehistory(row.id).then(res => {
          this.$message.success('操作成功')
          this.$emit('success')
          this.getList()
        })
      }).catch(() => {});
    },
		//取消
    handleClose(formName) {
      this.$emit('update:visible', false)
			// this.$refs[formName].resetFields();
    },
		//确认
		handleConfirm(){
			this.$emit('success', '你好')
    },
    //新建子账号
    submitForm(formName) {
      console.log('formName',formName)
      this.$refs[formName].validate((valid) => {
        console.log('valid',valid)
        if (valid) {
          this.loading = true
          var data = {
              ...this.ruleForm
            }
            addHistory(data).then(res => {
              // this.handleSuccess("创建成功")
              this.getList()
              setTimeout(() => {
                this.loading = false
              }, 1000);
            }).catch(()=>{
               this.loading = false
            }).finally(() => {

            })
           
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    handleSuccess(msg) {
      if (msg === '已拒绝') {
        var type = 'error'
      } else {
        var type = 'success'
      }
      this.$message({
        message: msg,
        type: type,
        duration: 1000,
        onClose: () => {
          this.handleClose()
          this.$emit('success')
        }
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.ex-diolog {
  ::v-deep .ex--dialog--footer {
    border: none !important;
		padding: 0 !important;
  }
	::v-deep .ex--dialog--main {
    padding: 10px 20px !important; 
  }
}
</style>